<template>
	<view class="body" v-if="show">
		<view class="goods">
			<view class="item">
				<view class="img">
					<image :src="info.spec.spec_image==''? info.image : info.sku_image" mode="scaleToFill"></image>
				</view>
				<view class="content">
					<view class="top">
						<view class="title">{{ info.goods_name }}</view>
						<view class="price"> <text>￥</text> {{ info.goods_price }}</view>
					</view>
					<view class="center">
						<view class="type">
							<view>{{ info.goods_attr ? info.goods_attr :'' }}</view>
						</view>
						<view class="num">x{{ info.total_num }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="service">
			<view class="s-title">选择服务类型</view>
			<view class="type">
				<block v-for="(item,index) in typeList" :key="index">
					<view class="t-item" @click="jumpClick(item)">
						<view class="t-cont">
							<view class="left">
								<view class="c-title">{{item.title}}</view>
								<view class="text">{{item.desc}}</view>
							</view>
							<view class="right">
								<uni-icons type="right" size="16" color="#999999"></uni-icons>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				id: 0,
				info: {},
				typeList: [],
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getInfo()
		},
		methods: {
			getInfo() {
				let _this = this
				_this.$api.get('mall.refund/info', {
					id: _this.id
				}).then(res => {
					if (res.code == 1) {
						_this.info = res.data.order_goods_info
						_this.typeList = res.data.refund_type_list
						_this.show = true
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.navigateBack({
										delta: 1
									})
								}
							}
						})
					}
				})
			},
			jumpClick(item){
				let _this = this
				uni.navigateTo({
					url: '/pages/user/mall/refund/submit?id=' + _this.id + '&title=' + item.title + '&type=' + item.type,
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
		padding-bottom: 80rpx;
	}

	.body {
		width: calc(100vw - 48rpx);
		padding: 0rpx 24rpx;
	}

	/* 商品详情 */
	.goods {
		width: calc(100vw - 112rpx);
		padding: 40rpx 32rpx;
		margin-top: 24rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		position: relative;
	}

	.item {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 0;
		border-bottom: 1rpx solid #f9f6f6;
	}

	.item:first-of-type {
		padding-top: 0;
	}

	.item:last-of-type {
		padding-bottom: 0;
		border-bottom: none;
	}

	.item .img {
		width: 150rpx;
		height: 150rpx;
	}

	.item .img image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.item .content {
		width: calc(100vw - 286rpx);
	}

	.item .content .top,
	.item .content .center {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
	}

	.item .top .title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		overflow: hidden;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}

	.item .top .price {
		font-size: 24rpx;
	}

	.item .top .price text {
		font-size: 20rpx;
	}

	.item .content .center {
		font-size: 20rpx;
		color: #999999;
		margin-bottom: 21rpx;
	}

	.item .content .bottom text {
		font-size: 20rpx;
		color: #000000;
		padding: 0 8rpx;
		border: 1rpx solid #000000;
		border-radius: 4rpx;
		margin-right: 12rpx;
	}

	/* 选择服务类型 */
	.service {
		width: calc(100vw - 112rpx);
		padding: 0 32rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		margin-top: 24rpx;
	}

	.service .s-title {
		padding: 32rpx 0;
		font-size: 32rpx;
		font-weight: bold;
	}

	.service .t-item,
	.service .t-item .t-cont {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.service .t-item {
		padding: 32rpx 0;
		border-top: 1rpx solid #E5E5E5;
	}

	.service .t-item .t-img {
		width: 48rpx;
		height: 48rpx;
		margin-right: 20rpx;
	}

	.service .t-item image {
		width: 48rpx;
		height: 48rpx;
	}

	.service .t-item .t-cont {
		width: 100%;
	}

	.service .t-item .c-title {
		font-size: 26rpx;
		color: #333333;
		font-weight: bold;
	}

	.service .t-item .text {
		font-size: 22rpx;
		color: #999999;
	}
</style>